<script setup>
	import { ref } from 'vue';
	// 文本框 自我介绍
	const text = ref('');

	// 下拉列表 城市
	const city = ref('BH');

	// 单选框 血型
	const blood = ref('o');

	// 单个复选框 是否同意用户协议 用 boolean 类型
	const isAgree = ref(false);

	// 多个复选框-爱好-使用数组 如果要默认，和上面一样只要在内部添加对应的 value 值
	const hobby = ref(['PPQ', 'YY']);
</script>

<template>
	<div>
		<!-- 文本框 -->
		<textarea rows="5" cols="30" v-model="text"> </textarea>
		<br />
		<br />

		<!-- 下拉列表 -->
		<select v-model="city">
			<!-- <option value="BH">北京2222</option> 由此可见 哪个在上面就是先显示哪个 value 相同的时候 -->
			<option value="BH">北京</option>
			<option value="SH">上海</option>
			<option value="GD">广东</option>
			<option value="SZ">深圳</option>
		</select>
		<br />
		<br />

		<!-- 单选框 -->
		<!-- 单选框是都选 只要 value 等于 v-model 所绑定的值 那么就选中（第一个） -->
		<input type="radio" value="o" v-model="blood" /> O
		<input type="radio" value="o" v-model="blood" /> O
		<input type="radio" value="ab" v-model="blood" /> AB
		<input type="radio" value="a" v-model="blood" /> A
		<input type="radio" value="b" v-model="blood" /> B <br />
		<br />

		<!-- 单个复选框 -->
		<input type="checkbox" v-model="isAgree" /> 是否同意用户协议 <br />
		<input type="checkbox" v-model="isAgree" /> 是否同意用户协议 <br />

		<!-- 多个复选框 -->
		<input type="checkbox" v-model="hobby" value="PPQ" /> 乒乓球
		<input type="checkbox" v-model="hobby" value="YMQ" /> 羽毛球
		<input type="checkbox" v-model="hobby" value="SJ" /> 射击
		<input type="checkbox" v-model="hobby" value="QM" /> 骑马
		<input type="checkbox" v-model="hobby" value="YY" /> 游泳
		<input type="checkbox" v-model="hobby" value="YY" /> 游泳
		<!-- 
			总结： 
		 		1. 像单选框/复选框是通过 v-model 中的值进行分组的，类似与原先的 name
				2. 除了单个复选框的是可以不用 value 获取值的，其余的都是通过 value 来获取的
				3. 像单元框与复选框每一个都要添加 v-model 进行绑定，但是下拉列表只要在 select 添加就可以
		--></div>
</template>

<style scoped></style>
